<template>
   <div class="stagnation">

    <ul class="stagnation-title">
        <li class="tab-title">产品编号</li>
        <li class="tab-title">停留时间(h)</li>
    </ul> 
    
    <ul class="stagnation-table" v-for="item of tableList">
         <li class="tab-border" v-for="item of borderList"></li>
    </ul> 
    <div class="stagnation-data-wrapper">
        <ul class="stagnation-data" v-for="item of list" :key="item.id">
            <li class="tab-content" >{{item.product}}</li>
            <li class="tab-content" >{{item.stagnationTime}}</li>
        </ul>
    </div>
		<div class="abnormal">{{ abnormalInfo}}</div>


   </div>
</template>

<script>


export default {
  props:{
    list:Array,
    abnormalInfo:String
  },
  data () {
    return {
        tableList:["1","2","3"],
        borderList:["1","2"],
        // abnormalInfo:"XXX PAD-1 通讯异常",
        // list:[
        //   {
        //     id:"0001",
        //     product:"CDBC213DSDASDADSAW",
        //     stagnationTime:5
        //   },
        //   {
        //     id:"0002",
        //     product:"CDBC213DSDASDADSAW",
        //     stagnationTime:5
        //   }, 
        //   {
        //     id:"0003",
        //     product:"CDBC213DSDASDADSAW",
        //     stagnationTime:5
        //   }
        // ]
    }
  }
}
</script>
<style lang="stylus" scoped>
.stagnation{
  height:238px;
  position:relative;
} 
.stagnation-title{
    width:100%;
    height:44px;
    border:1px solid #26aab7;
    box-sizing:border-box;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.stagnation-title .tab-title{
      height:44px;
      width:50%;
      border-right: 1px solid #26aab7;
      line-height:44px;
      text-align:center;
      font-size:26px;
      color:#fff;
}
.stagnation-title .tab-title:last-child{
      border:none;
}

.stagnation-table{
  width:100%;
    height:44px;
    box-sizing:border-box;
    border-left: 1px solid #26aab7;
    border-right: 1px solid #26aab7;
    border-bottom: 1px solid #26aab7;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stagnation-table .tab-border{
      height:44px;
      width:50%;
      border-right:1px solid #26aab7;
}
.stagnation-table .tab-border:last-child{
      border:none;
}
.stagnation-data-wrapper{
    width:100%;
     height:132px ; 
     position:absolute;
     top:44px;
     overflow:hidden;
  }
     
 .stagnation-data{
   height:44px;
   box-sizing:border-box;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 .stagnation-data .tab-content{
   height:44px;
   width:50%;
   line-height:44px;
   text-align:center;
   font-size:24px;
   color:#26aab7;
 }      
  .abnormal{
    height:44px;
    width:100%;
    line-height:44px;
    text-align:center;
    font-size:24px;
    color:red;
    box-sizing:border-box;
    border-left: 1px solid #26aab7;
    border-right: 1px solid #26aab7;
    border-bottom: 1px solid #26aab7;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px ;
}       
   
</style>